<template>
    <div class="page">
        <div class="page-content-header">
            <PageHeader :title="title">
                <template #right>
                    <el-link type="primary" @click="handleAdd">新增</el-link>
                </template>
            </PageHeader>
        </div>
        <div class="page-bod">
            <div class="page-search">
                <el-form :model="data.search" label-width="100px" label-position="top">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item>
                                <el-input v-model="data.search.search" placeholder="请输入关键词" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-select v-model="data.search.is_active" placeholder="请选择是否启用">
                                    <el-option label="是" value="1" />
                                    <el-option label="否" value="0" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <div class="flsc">
                                <el-button type="primary" @click="search">搜索</el-button>
                                <el-button type="info" @click="reset">重置</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="page-table">
                <TableModel :table-data="data.tableData" :total="data.total" :page="data.page.page"
                    :page-size="data.page.size" @change-page="getList" :min-height="300">
                    <el-table-column type="index" width="80" label="序号" />
                    <el-table-column prop="full_name" label="昵称" />
                    <el-table-column prop="username" label="用户名" />
                    <el-table-column prop="email" label="邮箱" width="200" />
                    <el-table-column prop="phone" label="手机号" />
                    <el-table-column prop="created_at" label="创建时间" :formatter="formatTime" />
                    <el-table-column prop="updated_at" label="更新时间" :formatter="formatTime" />
                    <el-table-column prop="is_active" label="是否启用" :formatter="formatIsActive" />
                    <el-table-column label="操作" width="180">
                        <template #default="scope">
                            <el-link class="mr20" type="primary" @click="handleEdit(scope.row)">编辑</el-link>
                            <el-link type="danger" @click="handleDelete(scope.row)">删除</el-link>
                        </template>
                    </el-table-column>
                </TableModel>
            </div>
        </div>
        <UserForm ref="userFormRef" @success="getList" />
    </div>
</template>

<script setup>
import PageHeader from '@/components/page-header/index.vue'
import { userPage, userDelete } from '@/api/user'
import dayjs from 'dayjs'
import { useMessage } from '@/hooks/useMessage'
import UserForm from './components/userForm.vue'
import TableModel from '@/components/tableModel/index.vue'
const route = useRoute()
const title = ref(route.meta.title)
const message = useMessage()
const userFormRef = ref(null)
const data = reactive({
    search: {
        is_active: undefined,
        search: '',
    },
    page: {
        page: 1,
        size: 10,
    },
    tableData: [],
    total: 0,
})
const formatTime = (row, column) => {
    return dayjs(row[column.property]).format('YYYY-MM-DD HH:mm:ss')
}
const formatIsActive = (row) => {
    return row.is_active ? '是' : '否'
}
const search = () => {
    data.page.page = 1
    data.page.size = 10

    getList()
}
const reset = () => {
    data.search = {
        is_active: undefined,
        search: '',
    }
    data.page = {
        page: 1,
        size: 10,
    }
    search()
}
const getList = async () => {
    const params = {
        ...data.page,
    }

    for (const key in data.search) {
        if (data.search[key] !== undefined && data.search[key] !== '' && data.search[key] !== null) {
            params[key] = data.search[key]
        }
    }
    const res = await userPage(params)
    console.log(res)
    if (res.code === 200) {
        data.tableData = res.data.list
        data.total = res.data.total
    }
}

const handleEdit = (row) => {
    userFormRef.value.open('edit', row)
}
const handleDelete = async (row) => {
    console.log(row)
    const res = await message.confirmMessage('确定删除该用户吗？')
    if (res) {
        const res = await userDelete({ id: row.id })
        if (res.code === 200) {
            message.success('删除成功')
            getList()
        }
    }
}

const handleAdd = () => {
    userFormRef.value.open('add')
}

onMounted(() => {
    reset()
})
</script>

<style scoped lang="scss">
.page {
    width: 100%;
    height: 100%;
}

.page-content {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0f7ff 0%, #ddeaf5 100%);
    border-radius: 10px;
}

.page-content-header {
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
}

.page-body {
    width: 100%;
    height: calc(100% - 80px);
}


.page-search {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 18px;
    border-radius: 10px;
    margin-bottom: 2px;
}

.page-table {
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 18px;
}
</style>